<!--
 * @FileDescription 考核设置页
 * @Author lz
 * @Date 20230130 13:31:51
 * @LastEditors lz
 * @LastEditTime 20230130 13:31:51
-->
<template>
    <div class="wp">
        <!-- 顶部 -->
        <hdrModel Hierarchy="1" :ID="0"></hdrModel>
        <!-- 设置 -->
        <div class="contentBox">
            <div class="title">
                任务设置
            </div>
            <div class="tableBox">
                <div class="optionBox" :class="item.state == 2 ? 'ChickOut' : ''"
                    v-for="( item, index ) in state.optionList" :key="index" @click="selectBtn(item.name)">
                    {{ item.name }}
                    <img src="/structure/partition.png" class="partition" v-if="index != 4">
                </div>
            </div>
            <div class="statistics">
                已选择{{ state.structureNum }}个结构，{{ state.formNum }}个组成，{{ state.principleNum }}个原理，{{
                    state.parameterNum
                }}个参数类型，总计{{ state.totalNum }}个实训任务。
            </div>
            <div class="onSearch"> <a-input-search v-model:value="state.value" placeholder="搜索" @search="onSearch" />
                <button class="reset" @click="reset()">重置</button>
            </div>

            <!-- 选项卡 -->
            <div class="setAnOption">
                <div class="OptionCont" v-for="( item, index ) in state.tabList" :key="index" @click="Option(index)"
                    :class="item.types == true ? 'ChickOption' : ''">
                    <img src="/structure/jg_bg_select.png" v-if="item.Type == '结构'" class="TypeIcon">
                    <img src="/structure/zc_bg_select.png" v-if="item.Type == '组成'" class="TypeIcon">
                    <img src="/structure/yl_bg_select.png" v-if="item.Type == '原理'" class="TypeIcon">
                    <img src="/structure/cs_bg_select.png" v-if="item.Type == '参数'" class="TypeIcon">
                    <div class="tit_order">任务{{ item._id }}</div>
                    <div class="task">{{ item.Name }}</div>
                </div>
            </div>

            <div class="Start" @click="handleClick()" v-if="HomeContent.Default.itemType.value == '教学'">
                开始教学
            </div>
            <div class="Start" @click="handleClick()" v-if="HomeContent.Default.itemType.value == '训练'">
                开始训练
            </div>
            <div class="Start" @click="handleClick()" v-if="HomeContent.Default.itemType.value == '考核'">
                开始考核
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import hdrModel from '../strHeader/index.vue'
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, Ref } from 'vue'
import { useRouter } from 'vue-router'
import appraisalData from './strAppraisalSettings';

import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import MessageCode from '../MessageCode';
import simulationData from '../simulationTraining/simulationTraining';
import HomeContent from '../HomeContent';
const router = useRouter()
const handleClick = async function () {
    if (HomeContent.Default.ApplicationType.value == '考核') {
        HomeContent.Default.TypeStatus.value = false
    }
    // 重置
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.StructureAdapterRequest(MessageCode.Default.MsgCodesList.SYSTEM_RESET))
    let final: any = []
    appraisalData.Default.AppraisalDataList.value.forEach(item => {
        if (item.types == true) {
            final.push(item)
        }
    });
    final.forEach((j: any) => {
        delete j.types
    });
    console.log(final);
    const res: ClientMessage.StructureAdapterResponse = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.StructureAdapterRequest(MessageCode.Default.MsgCodesList.STRUCTURE_SET_TASK, JSON.stringify(final)))
    console.log(JSON.parse(res.Content), '任务提交回调++++++++++++++++++++++++++++++');
    simulationData.Default.trainingDatalist.value = JSON.parse(res.Content).Result._v
    router.push('simulationTraining')

}
const state = reactive({
    optionList: [
        {
            name: '全部',
            state: 2,
        },
        {
            name: '结构',
            state: 1,
        },
        {
            name: '组成',
            state: 1,
        },
        {
            name: '原理',
            state: 1,
        },
        {
            name: '参数',
            state: 1,
        }
    ],
    value: '',
    CurrentType: '全部',
    tabList: <any>[],
    structureNum: 0,
    formNum: 0,
    principleNum: 0,
    parameterNum: 0,
    totalNum: 0,
});

let newArr = appraisalData.Default.AppraisalDataList.value
// 切换类型
function selectBtn(val: string) {
    state.CurrentType = val
    state.optionList.forEach(i => {
        if (i.name == val) {
            i.state = 2
        } else {
            i.state = 1
        }
    });
    switchData()
}
function switchData() {
    state.tabList = []
    newArr.forEach(item => {
        if (state.CurrentType == '全部') {
            state.tabList.push(item)
        }
        if (item.Type == state.CurrentType) {
            state.tabList.push(item)
        }
    });
}
//模糊搜索
function onSearch() {
    let data = [];
    for (let i = 0; i < newArr.length; i++) {

        if (newArr[i].Name.indexOf(state.value) != -1) {
            data.push(newArr[i]);
        }
    }
    state.tabList = []
    data.forEach(item => {
        if (state.CurrentType == '全部') {
            state.tabList.push(item)
        }
        if (item.Type == state.CurrentType) {
            state.tabList.push(item)
        }
    });
}
function Option(val: number) {
    state.tabList[val].types = !state.tabList[val].types
    newArr[val].types = newArr[val].types
    // 数量提示
    state.structureNum = 0
    state.formNum = 0
    state.principleNum = 0
    state.parameterNum = 0
    newArr.forEach(item => {
        if (item.types == true) {
            if (item.Type == '结构') {
                state.structureNum++
            }
            if (item.Type == '组成') {
                state.formNum++
            }
            if (item.Type == '原理') {
                state.principleNum++
            }
            if (item.Type == '参数') {
                state.parameterNum++
            }
        }
    });
    state.totalNum = state.structureNum + state.formNum + state.principleNum + state.parameterNum
}
// 数据过滤方法
function DataFilteringMethod() {
    state.tabList = []
    newArr.forEach(item => {
        item.types = false
        if (state.CurrentType == '全部') {
            state.tabList.push(item)
        }
    });
}
// 重置
function reset() {
    // 如果在全部点点击的重置，渲染全部数据，否则渲染各自的数据
    state.tabList = []
    newArr.forEach(item => {
        if(state.CurrentType == '全部') {
            state.tabList.push(item)
        }
        if (item.Type == state.CurrentType) {
            state.tabList.push(item)
        }
        item.types = false
    })
    state.value = ''
    state.structureNum = 0
    state.formNum = 0
    state.principleNum = 0
    state.totalNum = 0
    
}
onMounted(() => {
    DataFilteringMethod()
});

</script>

<style scoped>

.reset {
    width: 70px;
    height: 50px;
    background-color: #062447;
    position: absolute;
    /* left: 360px; */
    left: 398px;
    font-size: 20px;
    color: #bfbfbf;
    border: 1px solid #3F86D3;
}
.wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: linear-gradient(60deg, #011D3D, #07264A);
    position: relative;
}

.contentBox {
    position: relative;
    margin: 0 auto;
    width: 1779px;
    height: 951px;
    background-image: url('/structure/assessment_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.title {
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 32px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #1BDCFF;
}

.tableBox {
    margin-left: 40px;
    margin-top: 30px;
    width: 600px;
    height: 50px;
    background: rgba(1, 28, 57, 0.7);
    border: 1px solid #3F86D3;
    display: flex;
}

.partition {
    float: right;
    width: 1px;
    height: 43px;
    padding-top: 3px;
}

.optionBox {
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
    color: #386393;
    flex: 1;
}

.ChickOut {
    color: #fff;
    background-image: url('/structure/selectLabel.png');
    background-repeat: no-repeat;
    background-size: 8px 5px;
    background-position: 56px 36px;
}

.onSearch {
    position: absolute;
    top: 104px;
    /* right: 80px; */
    right: 120px;
    width: 400px;
    height: 50px;
}

:deep().ant-input {
    height: 50px;
    background-color: transparent;
    color: #fff;
    font-size: 18px;
    border-color: #3F86D3;
    border-right: 0px !important;
}

:deep().ant-input-group-addon {
    background-color: transparent;
    border: 1px solid #3F86D3 !important;
    border-left: 0px !important;
}

:deep().ant-input:focus {
    /* 去除获取焦点时的样式 */
    border-color: #3F86D3;
    box-shadow: none;
}

:deep().ant-btn-icon-only {
    background-color: transparent;
    border: none;
}

:deep() .anticon-search {
    color: #fff;
}
:deep() .ant-btn:hover, .ant-btn:focus {
    background-color: #052447 !important;
}
.statistics {
    position: absolute;
    top: 118px;
    left: 660px;
    color: #fff;
    font-size: 18px;
}

.setAnOption {
    margin: 0 auto;
    margin-top: 20px;
    width: 1700px;
    height: 670px;
    overflow-y: auto;
}

.setAnOption::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.setAnOption::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/

    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #45B5FF;
}

.setAnOption::-webkit-scrollbar-track {
    /*滚动条里面轨道*/

    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #123965;
}

.OptionCont {
    position: relative;
    width: 335px;
    height: 221px;
    background-image: url('/structure/option_bg_Select.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    float: left;
}
.TypeIcon{
    position: absolute;
    width: 27px;
    right:27px ;
    top: 27px;
}
.ChickOption {
    background-image: url('/structure/option_bg.png');
}

.tit_order {
    font-size: 18px;
    font-weight: bold;
    color: #FEFFFF;
    padding-top: 22px;
    padding-left: 60px;
}

.task {
    padding-top: 60px;
    font-size: 24px;
    font-weight: bold;
    color: #FEFFFF;
    text-align: center;
}

.Start {
    margin: 14px auto;
    font-size: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 54px;
    width: 150px;
    height: 54px;
    background-image: url('/structure/btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.Start:hover {
    color: #fff;
    background-image: url('/structure/btn_bg_select.png');

}
</style>
